import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

/// A text field that also has buttons to select all the text and copy the
/// selected text to the clipboard.
class BackdropFilterPage extends StatefulWidget {
  const BackdropFilterPage({super.key});

  @override
  State<BackdropFilterPage> createState() => _BackdropFilterPageState();
}

class _BackdropFilterPageState extends State<BackdropFilterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: buildSizedBox(),
      ),
    );
  }

  SizedBox buildSizedBox() {
    return SizedBox(
      height: 200,
      width: double.infinity,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          // 背景
          Image.asset("assets/images/banner3.png"),
          // 添加剪裁
          ClipRect(
            child: buildBackdropFilter(),
          ),
        ],
      ),
    );
  }

  BackdropFilter buildBackdropFilter() {
    return BackdropFilter(
      // 模糊过滤器
      filter: ImageFilter.blur(
        sigmaX: 2,
        sigmaY: 2,
      ),
      // 设置子项
      child: Container(
        color: Colors.white.withOpacity(0.4),
        alignment: Alignment.center,
        height: 44,
        child: const Text(
          '程序员应当知其然 而知其所以然',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  double sliderValue = 0;
  String sliderText = "还没操作";

  Slider _buildSlider() {
    return Slider(
      value: sliderValue,
      max: 100,
      min: 0,
      label: "$sliderValue",
      onChanged: (value) {
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value) {
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value) {
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

  void updateSlider(value, text) {
    sliderValue = value;
    sliderText = text;

    setState(() {});
  }
}

void main() => runApp(const MaterialApp(
    debugShowCheckedModeBanner: false, home: BackdropFilterPage()));
